Add ability to edit existing images in the media library#305
Add ability to edit existing images in the media library#305dkotter wants to merge 38 commits intoWordPress:developfrom
Conversation
…n passed, add that as a reference image before making our image generation request
…he image description
…mage for easier comparison. In that state, ensure refining further refines the refined image instead of the original. And ensure generating another image sends the original image along with the refinement prompt
… all styles into our stylesheet instead of inline. Minor adjustments to spacing and text
…sn't a hook to add this
… as well as a prompt area for specific edits. Set this up to match the flow we use in our image generation components. Add necessary CSS and a helper function to turn an image URL into a base64 encoded image
…n. Some minor style tweaks
…n flow. This allows you to refine an image multiple times, refining the new refined image each time. Ensure we keep track of all prompts used to store with the image. Update text to match our other image generation flows
…wn. Ensure we don't add extra spacing when our tools are hidden
…n to remove a certain color and replace with transparency that we can try out if we want transparent background instead of white background
…he requested image and then sending that along, so the LLM has known boundaries to expand to. Update our remove background prompt to work better with modern LLMs
…t happens, allowing users to paginate back and forth to those images, allowing them to import previously generated images or go back and start the refinment process from a different state
…responses we'll need to test
…til the new Google Provider is released
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #305 +/- ##
=============================================
+ Coverage 57.05% 57.43% +0.37%
- Complexity 591 596 +5
=============================================
Files 42 42
Lines 3083 3101 +18
=============================================
+ Hits 1759 1781 +22
+ Misses 1324 1320 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
For some reason my Google credentials aren't working, so I can't fully test this (will continue to see what's going on there so I can test more fully, but have some thoughts for now). I would advocate for just removing the Given that the prompt textarea and Also for the Expand and Remove and Refine buttons let's ensure the base image is still present, as for now clicking AI Edit replaces the image and renders buttons but would be ideal to keep the image and add in the buttons. |
…. Hide the prompt textarea and add a new Refine Image button that when clicked will show that. Minor text and style updates
This is done now. Removed the
Added a For now I haven't added the textarea below the image as it's pretty common for an image to be larger than the screen height and so you'd have to scroll down to see those options. So easy to miss those were added in that scenario. Personally I think this conversational image editing is the most useful thing here (comparing to removing background or expanding the image). My make sense to have that be the first button, at the moment I've left that as the last.
I've left the original image while generation is in place. Once the image is generated, the original image hides as we show that side-by-side with the generated image. |
Oh, didn't realize that was core default, huh ok then I guess ignore me and go back to YELLING AT PEOPLE?
Ok, that makes sense, I concur.
Totally fine moving that to be the first button. |
2 participants
Important
This PR is branched from #292. Once that PR is merged, I'll open this for review.
What?
Closes #236, #237
Adds the ability to edit existing images in the media library views.
Why?
We already have the ability to generate images and we're adding the ability to refine those images in #292 but we don't have a way to refine/edit existing images. This PR adds that in via a prompt approach and with a few preset options (
Remove background,Expand background).How?
Remove background,Expand background, andRefine Image, which will add a prompt textarea when clicked that allows you to make conversational edits to the imageUse of AI Tools
Used both Claude Code (running Opus 4.6) and Cursor (running GPT-5.3 Codex) to plan and execute, with final refinement and clean up done by me.
Testing Instructions
npm install && npm run buildEdit ImagebuttonRefine ImageGenerateEdit imageScreenshots